<template>
	<div class="banner">
		<el-row justify="space-between" style="margin-top: 2rem;">
			<el-col :span="10"><h1>轮播广告图</h1></el-col>
			<el-col :span="4">
				<el-button type="success" @click="$router.push({name:'hotedit'})">
					<el-icon><circle-plus /></el-icon>添加新的轮播图
				</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="banners" style="width: 100%;" :border="true">
				<el-table-column label="描述" prop="memo"/>
				<el-table-column label="热度" prop="hot" :sortable="true" width="100" align="center"/>
				<el-table-column label="类型" prop="type" :sortable="true" width="100" align="center"/>
				<el-table-column label="图片" width="200" align="center">
					<template #default="scope">
						<el-avatar shape="square" :size="100"
							:src="`${$ServerUrl}/api/public/showImg/${scope.row.picture}`">
						</el-avatar>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template #default="scope">
						<el-button type="danger" size="mini"
							@click="Del(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
	</div>
</template>

<script>
import {CirclePlus} from '@element-plus/icons-vue';
export default{
	name:'Banner',
	components:{CirclePlus},
	data(){
		return {
			banners:[]
		}
	},
	methods:{
		Del(id){
			this.axios.get('/api/adm/hot/delete/'+id).then((res)=>{
				if(res.data.code==200){
					this.getData();
				}
			}).catch((err)=>{
				//console.log(err);
			});
		},
		getData(){
			this.axios.get('/api/adm/hot/findAll').then((res)=>{
				this.banners = res.data.data;
			}).catch((err)=>{
				//console.log(err);
			});
		}
	},
	created() {
		this.getData();
	}
}
</script>

<style scoped>
.banner{
	width: 90%;
	margin: 0 auto;
}
</style>
